<template>
	<view class="circle-box">
		<uni-nav-bar background-color="#fff" color="#000" :status-bar="true" title="圈子" fixed>
			
			<view slot="left">
				<view class="navWp">
					<view class="back" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
					</view>
				</view>
			</view>
		</uni-nav-bar> 
		<!-- 顶部tab切换 -->
		<view class="tab-box" v-if="searchShow">
			<view :class="tabClickIndex==index?'tab-wrap tab-active':'tab-wrap tab-unactive'"
				v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
				<view :class="tabClickIndex==index?'tab-cicle tab-acticve-cicle':'tab-cicle tab-unacticve-cicle'">
					<img :src="item.imgUrl" alt="">
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="active-page">
			<activePage  v-if="activePageShow"></activePage>
		</view>
		<view class="market-page">
			<marketPage v-if="marketPageShow"></marketPage>
		</view>
		<view class="mySupPur-page">
			<mySupPurPage v-if="mySupPurPageShow"></mySupPurPage>
		</view>
		
	</view>
</template>

<script>
	import activePage from '@/pagesBusiness/circleList/circleList.vue'
	import marketPage from '@/pagesBusiness/marketPage/marketPage.vue'
	import mySupPurPage from '@/pagesBusiness/mySupPur/mySupPur.vue'
	export default {
		components:{
			activePage,
			marketPage,
			mySupPurPage
		},
		data() {
			return {
			
				searchShow: true, //搜索显示
				tabList: [{
						imgUrl: 'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png',
						name: '活动'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '供求市场'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '我的'
					},
				],
				tabClickIndex: 0, //tab选中的index值
				activePageShow:true,//活动页面显示
				marketPageShow:false,//商机页面显示
				mySupPurPageShow:false,//我的页面显示
			};
		},
		onShow() {
			
			this.isMyself = this.$store.state.isSelf
			let a=uni.getStorageSync(`supplyJumpTo`)
			console.log(a)
			
			if(a==1||a==2){
				this.mySupPurPageShow=false
				this.activePageShow=false
				this.marketPageShow=true
				this.tabClickIndex=1
				let item={
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '供求市场'
					}
					let index=1
				this.tabClick(item, index)
				
				
			}else if(a==0){
				this.mySupPurPageShow=false
				this.activePageShow=true
				this.marketPageShow=false
				this.tabClickIndex=0
				let item={
						imgUrl: 'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png',
						name: '活动'
					}
					let index=0
				this.tabClick(item, index)
			}else if(a==3||a==4){
				this.mySupPurPageShow=true
				this.activePageShow=false
				this.marketPageShow=false
				this.tabClickIndex=2
				let item={
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '我的'
					}
					let index=2
				this.tabClick(item, index)
			}
			// this.getInitDate()
		
		},
		methods:{
			// 点击导航栏左侧
			goBack() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			
			// tab切换点击事件
			tabClick(item, index) {
				console.log(index)
				console.log(item)
				this.tabClickIndex = index
				if (index == 1) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//nhJ5ffGc2zhs60d80f016055f57051d38ff74b8a4e0b_1660098959213.png'
					})
					this.tabList[1].imgUrl =
						'https://file.casugn.com/storecompcard//WYWMCallue7ueed3b042042bb6067c70420fb8327f23_1660099871888.png'
			
					// uni.navigateTo({
					// 	url: '/pagesBusiness/circleList/circleList'
					// })
					this.mySupPurPageShow=false
					this.activePageShow=false
					this.marketPageShow=true
				} else if(index == 0){
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[0].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'
					
					// uni.navigateTo({
					// 	url: '/pagesBusiness/circleList/circleList'
					// })
					this.activePageShow=true
					this.marketPageShow=false
					this.mySupPurPageShow=false
				}else{
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[2].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'
					
					this.mySupPurPageShow=true
					this.activePageShow=false
					this.marketPageShow=false
					uni.setStorageSync(`historyJumpTo`,1)
				}
				console.log(this.tabClickIndex)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,.circle-box{
		height: 100vh;
	}
.circle-box {
		// background: #F8F9FF;
		// background: cadetblue;
		position: absolute;
		width: 100%;
		// height: 100%;
		.navWp {
			display: flex;
			align-items: center;
		
			.back {}
		
			.user {
				margin-left: 20upx;
			}
		}
		
		.tab-box {
			display: flex;
		
			.tab-wrap {
				width: 178upx;
				text-align: center;
				height: 199upx;
				position: relative;
		
				.tab-cicle {
					margin: 0 auto;
					margin-top: 29upx;
					width: 110upx;
					height: 110upx;
					position: relative;
					text-align: center;
					border-radius: 50%;
		
					img {
						width: 40upx;
						height: 40upx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-20upx) translateY(-20upx);
					}
				}
		
				text {
					margin-top: 11upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
					line-height: 30upx;
				}
			}
		
			.tab-active {
				background: #FFFFFF;
			}
		
			.tab-unactive {
				background: #F8F9FF;
		
				img {
					width: 40upx;
					height: 40upx;
				}
			}
		
			.tab-acticve-cicle {
				background: #413BF3;
			}
		
			.tab-unacticve-cicle {
				background: transparent;
				border: 2upx solid #413BF3;
		
				img {
					width: 20upx;
					height: 20upx;
				}
			}
		}
		
		.active-page{
			position: absolute;
			// background: red;
			width: 100%;
			height: 100%;
		}
		.market-page{
			position: absolute;
			// background: red;
			width: 100%;
			height: 100%;
		}
		.mySupPur-page{
			position: absolute;
			// background: red;
			width: 100%;
			height: 100%;
		}
}
</style>
